<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜单</title>
		<style type="text/css">
			#menu {
				height: 720px;
				width: 200px;
				border: red solid 1px;
				
			}
				
			#userinfo{
				position: absolute;
				left: 300px;
				width: 200px;
				height: 300px;
				padding: 10px 10px 10px 10px;
				border: #000000 dashed 1px;
			}
			.header{
				background: gold;
				padding:10px 5px ;
				border-bottom: #cccccc dashed 1px;
			}
			a{
				display: block;
				border-bottom: #F9F2F4 dotted;
			}
			a:hover{
				background: #F5F5F5;
			}
			.hide{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="userinfo">
			<input type="text" name="" id="" value="" placeholder="请输入用户名" />
			<input type="password" name="" id="" value=""  placeholder="请输入密码"/>
			<input type="button" name="" id="" value="提交" />
		</div>
		<div id="menu">
			<div id="" class="item">
				<div id="" class="header" onclick="clickMe(this)">
					甜品
				</div>
				<div id="" class="content hide">
					<a>可乐</a>
					<a>奶茶</a>
					<a>牛奶</a>
					<a>咖啡</a>
				</div>
			</div>
			<div id="" class="item">
				<div id="" class="header" onclick="clickMe(this)">
					主食
				</div>
				<div id="" class="content hide">
					<a>鸡腿堡</a>
					<a>牛肉堡</a>
					<a>烧鸡</a>
					<a>炒饭</a>
				</div>
			</div>
			<div id="" class="item">
				<div id="" class="header" onclick="clickMe(this)">
					主食
				</div>
				<div id="" class="content hide">
					<a>鸡腿堡</a>
					<a>牛肉堡</a>
					<a>烧鸡</a>
					<a>炒饭</a>
				</div>
			</div>
			<div id="" class="item">
				<div id="" class="header" onclick="clickMe(this)">
					主食
				</div>
				<div id="" class="content hide">
					<a>鸡腿堡</a>
					<a>牛肉堡</a>
					<a>烧鸡</a>
					<a>炒饭</a>
				</div>
			</div>

		</div>
		
		
		<script type="text/javascript" src="../static/js/jquery-3.6.0.min.js">
			
		</script>
		<script type="text/javascript">
			function clickMe(self){
				// var hasHidden=$(self).next().hasClass('hide');
				// if(hasHidden)
				// {
				// 	$(self).next().removeClass('hide')
				// }else{
				// 	$(self).next().addClass('hide')
				// }
				$(self).next().removeClass('hide')
				$(self).parent().siblings().find('.content').addClass('hide')
				
			}
		</script>
	</body>
</html>
